<template>
  <el-collapse-item name="abnormalHandlingStatus">
    <div class="top" slot="title">
      <PartitionTitle title="异常处理情况" type="line"></PartitionTitle>
    </div>
    <el-table :data="list" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :label="col.label"
        :prop="col.prop"
      ></el-table-column>
    </el-table>
  </el-collapse-item>
</template>
<script>
import { getAbnormalStatistic } from "@/api/shifts/shiftHandover";
import { mapState } from "vuex";
export default {
  props: {
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
  },
  data() {
    return {
      columns: [
        { prop: "prop1", label: "异常总数" },
        { prop: "prop2", label: "待处理" },
        { prop: "prop3", label: "处理中" },
        { prop: "prop4", label: "已完成" },
        { prop: "prop5", label: "已忽略" },
        { prop: "prop6", label: "已关闭" },
      ],
      list: [{}],
    };
  },
  computed: {
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
  },
  methods: {
    getData() {
      if (!this.detailsData) {
        return;
      }
      const { factoryDeptCode, lineCode, classesStartTime, classesEndTime } =
        this.detailsData;
      const param = {
        factoryDeptCode,
        lineCode,
        classesStartTime,
        classesEndTime,
      };
      getAbnormalStatistic(param)
        .then((res) => {
          const columns = this.columns;
          if (res?.data) {
            const _list = [{}];
            columns.forEach((col) => {
              _list[0][col.prop] = res.data[col.label];
            });
            this.list = _list;
          } else {
            this.list = [{}];
          }
          console.log(this.list);
        })
        .catch((err) => {
          this.list = [{}];
        });
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        if (newVal) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 20px 0 10px;
}
.block-title {
  margin-bottom: 0;
}
</style>
